<template>
    <div>
        <top-bar></top-bar>
        <left-bar :datas='data'></left-bar>
        <div class="department">
            <div class="system">
                <home-bar :currentPage='currentPage'></home-bar>
                <div class="system-main">
                    <div class="main-position">
                        首页 > 员工管理 > 部门管理
                    </div>
                    <div class="main-height"></div>
                    <div class="main-mains">
                        <div class="main-top-nav">
                            <ul>
                                <router-link to="/employees" @click.native="addPath('/employees','员工管理')">
                                    <li>员工列表</li>
                                </router-link>
                                <router-link to="/departments" @click.native="addPath('/departments','员工管理')">
                                    <li class="active">部门管理</li>
                                </router-link>
                            </ul>
                        </div>
                        <div class="employee">
                            <div class="employee-top clear">
                                <router-link to="/adddepartment" @click.native="addPath('/adddepartment','员工管理')">
                                    <div class="fl">新增部门</div>
                                </router-link>
                                <p class="fl">
                                    <el-input v-model="search" placeholder="输入部门编码/名称/负责人"></el-input>
                                    <span @click="searchs()">查询</span>
                                </p>
                            </div>
                            <div class="employee-table">
                                <table>
                                    <tr>
                                        <td>序号</td>
                                        <td>部门编号</td>
                                        <td>部门名称</td>
                                        <td>在职员工数量</td>
                                        <td>部门负责人</td>
                                        <td>部门创建时间</td>
                                        <td>操作</td>
                                    </tr>
                                    <tr v-for="(item,index) in employeeData" :key="index" :class="{active:index%2==1}">
                                        <th>{{index+1}}</th>
                                        <th>{{item.serial}}</th>
                                        <th>{{item.name}}</th>
                                        <th>{{item.online_staff}}</th>
                                        <th>{{item.principal}}</th>
                                        <th>{{item.create_time | createTime}}</th>
                                        <th class="actives">
                                            <span @click="edit(item.id)">编辑</span>
                                            <span @click="remove(item.id)">删除</span>
                                        </th>
                                    </tr>
                                </table>
                            </div>
                            <div class="orderBotom">
                                <div class="orderBotomRight">
                                    <el-pagination @current-change="handleCurrentChange" :page-size="15" layout="total, prev, pager, next" :total='totalnum'>
                                    </el-pagination>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import topBar from "../../public/top";
import leftBar from "../../public/left";
import homeBar from "../../public/homebar";
export default {
  components: {
    leftBar,
    topBar,
    homeBar
  },
  data() {
    return {
      data: "/employees",
      currentPage: {
        path: "/departments",
        name: "员工管理"
      },
      search: "", //搜索
      employeeData: [],
      totalnum: ""
    };
  },
  methods: {
    edit(e) {
      //编辑
      this.$router.push("/editdepartment/" + e);
    },
    remove(e) {
      //删除
      let _this = this;
      _this
        .$confirm("是否删除该部门?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          _this
            .$http({
              url:
                _this.urls +
                "/who/Department/del/" +
                localStorage.getItem("uid") +
                "/" +
                localStorage.getItem("token"),
              method: "post",
              data: {
                id: e
              }
            })
            .then(function(res) {
              let data = res.data;
              if (data.code == "1") {
                _this.$message({
                  type: "success",
                  message: "删除成功!"
                });

                _this.dataList(_this.search, 1);
              }
            })
            .catch(function(error) {
              console.log(error);
            });
        })
        .catch(() => {
          _this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    addPath(n1, n2) {
      //点击切换home-bar
      var obj = {};
      obj.n1 = n1;
      obj.n2 = n2;
      this.$store.commit("addPath", obj);
    },
    handleCurrentChange(val) {
      this.dataList(this.search, val);
    },
    dataList(search, pages) {
      //获取部门列表
      let _this = this;
      _this
        .$http({
          url:
            _this.urls +
            "/who/Department/getDataList/" +
            localStorage.getItem("uid") +
            "/" +
            localStorage.getItem("token"),
          method: "post",
          data: {
            searchKey: search,
            page: pages
          }
        })
        .then(function(res) {
          let data = res.data;
          if (data.code == "1") {
            _this.employeeData = data.data.data;
            _this.totalnum = data.data.total;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    searchs() {
      this.dataList(this.search, 1);
    }
  },
  activated() {
    this.dataList(this.search, 1);
  },
  filters: {
    createTime(value) {
      var time = new Date(value * 1000);
      var month =
        time.getMonth() + 1 > 9
          ? time.getMonth() + 1
          : "0" + (time.getMonth() + 1);
      var data = time.getDate() > 9 ? time.getDate() : "0" + time.getDate();
      var hour = time.getHours() > 9 ? time.getHours() : "0" + time.getHours();
      var minutes =
        time.getMinutes() > 9 ? time.getMinutes() : "0" + time.getMinutes();
      var second =
        time.getSeconds() > 9 ? time.getSeconds() : "0" + time.getSeconds();
      var times =
        time.getFullYear() +
        "-" +
        month +
        "-" +
        data +
        " " +
        hour +
        ":" +
        minutes +
        ":" +
        second;
      return times;
    }
  }
};
</script>

<style lang="less">
@import "employee.less";
</style>

